<template>
  <div class="page-box">
    <div class="tabs-top">
      <div>
        <h3>合同基本信息</h3>
        <el-input placeholder="输入合同名称" prefix-icon="el-icon-search" v-model="leftSearch" @keyup.enter.native="handleInputSearch()"></el-input>
      </div>
      <h3 class="top-right">应收信息</h3>
    </div>
    <div class="item-line"></div>
    <el-tabs :tab-position="tabPosition" class="tabs-box" ref="tabsBox" @tab-click="handleTabClick">
      <el-tab-pane class="tabs-item" v-for="(item,index) in rentData" :key="index">
        <span slot="label" class="item-left">
          <div class="left-main">
            <template>
              <el-button v-if="item.status == '10'" type="text" class="accounting" @click.stop="editReceive(item)">接收</el-button>
              <el-button v-if="item.status == '11'" type="text" class="accounting" @click.stop="editCheck(item)">核算</el-button>
            </template>
            <el-button type="text" class="viewContract" @click.stop="showData(item.rentContractId)">查看合同</el-button>
            <div class="left-title">
              <h4 class="title" :title="item.contractName">
                {{item.contractName | ellipsis}}
                <img :src="NewIcon" class="imgIcon" v-if="item.status == '10'" />
              </h4>
              <span v-if="item.status == '10'" style="right: 45px">未接收</span>
              <span style="background-color:#1563D1;right: 45px" v-else>已接收</span>

              <span style="background-color:#1563D1;right: 0" v-if="item.status == '13'">已核算</span>
              <span v-else style="right: 0">未核算</span>
            </div>
            <div class="main">
              <div class="main-left">
                <p>
                  建筑面积:
                  <span>{{ item.buildingArea }}</span>m²
                </p>
                <p>
                  租赁周期:
                  <span>{{item.startDate}}至{{item.endDate}}</span>
                </p>
                <p class="last" :title="item.propertyNames">
                  物业名称:
                  <span>{{item.propertyNames}}</span>
                </p>
                <p class="last" :title="item.address">
                  物业地址:
                  <span>{{item.address}}</span>
                </p>
              </div>
              <!--<div class="main-right">
                                <p>物业资产:<span>{{item.propertyName}}</span>元</p>
                                <p>合同金额:<span>{{item.rentAmount}}</span>元</p>
              </div>-->
            </div>
          </div>
        </span>
        <div class="item-right">
          <list-page
            class="box-shadow"
            :pager="pager"
            :data="tableData"
            :showSelectSearch="true"
            :showSelectTips="true"
            :selectList="selectionList"
            :totalSearchData="totalSearchData"
            :searchDataFrom="searchDataFrom"
            :table-loading="tableLoading"
            placeholder="搜索物业名称"
            @searchByKey="searchByKey"
            @searchReset="searchReset"
            @selectionChange="selectionChange"
            @changePageSize="changePageSize"
            @changeCurrentPage="changeCurrentPage"
          >
            <template slot="buttons" v-if="tableData.length > 0">
              <el-button type="primary" size="small" @click="editActual()">收款</el-button>
              <el-button type="primary" size="small" plain @click="editData()">新建应收</el-button>
              <el-button type="primary" size="small" plain @click="confirmPnNum()">确认</el-button>
              <el-button type="primary" size="small" plain @click="sendPnNum()">推送</el-button>
              <el-button type="primary" size="small" plain @click="editReceivable()">应收调整</el-button>
              <el-button type="primary" size="small" plain @click="handlePress()">立即催款</el-button>
              <!--<el-button type="primary" size="small" plain @click="handleLeadingIn()">导入</el-button>-->
              <el-button type="primary" size="small" plain @click="downloadData()">导出</el-button>
            </template>
            <template slot="table">
              <el-table :data="tableData" align="center" @selection-change="selectionChange">
                <el-table-column width="60px" fixed type="selection"></el-table-column>
                <el-table-column label="费用周期" align="center" prop="costPeriodStart" width="200">
                  <template slot-scope="scope">{{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}</template>
                </el-table-column>
                <el-table-column label="收费项目" width="100" align="center" prop="chargeProjectName">
                  <!--<template slot-scope="scope">{{scope.row.chargeProjectName | dict('charge_project_type')}}</template>-->
                </el-table-column>
                <el-table-column label="应收日期" align="center" prop="receivableDate" width="100"></el-table-column>
                <el-table-column label="承租方" align="center" prop="costProjectName" width="200"></el-table-column>
                <el-table-column label="应收金额" align="center" prop="receivableMoney" width="100"></el-table-column>
                <el-table-column label="结算状态" align="center" prop="payStatus" width="100">
                  <template slot-scope="scope">{{scope.row.payStatus | dict('pay_status')}}</template>
                </el-table-column>
                <el-table-column label="发送状态" align="center" prop="payStatus" width="100">
                  <template slot-scope="scope">{{scope.row.sendStatus | dict('send_status')}}</template>
                </el-table-column>
                <el-table-column width="150" label="操作">
                  <template slot-scope="scope">
                    <el-button type="text" @click="showReceivableData(scope.row)">查看</el-button>
                    <el-button v-if="scope.row.payStatus =='02'" type="text" @click="editAccounts(scope.row)">生成核算单</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </list-page>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="left-pagination">
      <el-pagination
        @size-change="changeTabPageSize"
        @current-change="changeTabCurrentPage"
        :data="rentData"
        :page-size="tabPageSize"
        :current-page="tabCurrentPage"
        :total="tabTotal"
        :pager-count="5"
        background
        small
        layout="total, prev, pager, next, slot"
      ></el-pagination>
    </div>
    <edit-data ref="editData" @resetList="resetList"></edit-data>
    <edit-receivable @resetList="resetList" ref="editReceivable"></edit-receivable>
    <edit-actual ref="editActual" @resetList="resetList"></edit-actual>

    <edit-check ref="editCheck" @resetList="resetList" @getTabListData="getTabListData"></edit-check>
    <edit-receive ref="editReceive" @resetList="resetList" @getTabListData="getTabListData"></edit-receive>
    <lead-data ref="leadData" @resetList="resetList"></lead-data>
    <showActual ref="showActual" @resetList="resetList"></showActual>
    <editAccounts ref="editAccounts" @resetList="resetList"></editAccounts>
    <contract-view ref="contractView"></contract-view>
  </div>
</template>

<script src="./index.js"></script>
<style lang="scss" scoped>
@import "./index";
</style>
